<template>
  <div class="box">
    <div class="loginregisterbox">
      <div class="tab">
        <div
          class="logintab"
          @click="loginFormVisible=!loginFormVisible;registerFormVisible=!registerFormVisible "
        >用户登陆</div>
        <div
          class="registertab"
          @click="loginFormVisible=!loginFormVisible;registerFormVisible=!registerFormVisible"
        >用户注册</div>
      </div>

      <!-- 注册表单 -->
      <div class="registerform" v-if="registerFormVisible">
        <el-form :model="registerForm" label-width="100px" :rules="rules">
          <el-form-item prop="userName" label="用户名">
            <el-input v-model="registerForm.userName"></el-input>
          </el-form-item>

          <el-form-item prop="password" label="密码">
            <el-input type="password" v-model="registerForm.password"></el-input>
          </el-form-item>
          <el-form-item prop="userEmail" label="邮箱">
            <el-input v-model="registerForm.userEmail"></el-input>
            <el-button type="primary" @click="getRegisterCode">获取验证码</el-button>
          </el-form-item>
          <el-form-item prop="code" label="验证码">
            <el-input type="text" v-model="registerForm.code"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
            <el-button @click="resetForm('dynamicValidateForm')">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="loginform" v-if="loginFormVisible">
        <!-- 登陆表单 -->
        <el-form :model="LoginForm" label-width="100px" :rules="rules">
          <el-form-item prop="userName" label="用户名">
            <el-input v-model="LoginForm.userName"></el-input>
          </el-form-item>

          <el-form-item prop="password" label="密码">
            <el-input type="password" v-model="LoginForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" size="medium" style="width:100%" @click="login">登陆</el-button>
            <el-button type="primary" @click="alilogin">支付宝第三方登陆</el-button>
            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getEmailCode,
  registerUser,
  loginUser,
  getUserInfo,
  alilogin,
} from "../api/requestapi";
export default {
  name: "Login",

  data() {
    return {
      registerFormVisible: false,
      loginFormVisible: true,

      token: "",

      registerForm: {
        userName: "",
        password: "",
        userEmail: "",
        code: "",
      },

      LoginForm: {
        userName: "",
        password: "",
      },

      //验证规则
      rules: {
        userName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "不能为空", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        userEmail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
    };
  },

  methods: {
    //获取邮箱验证码
    getRegisterCode() {
      getEmailCode(this.registerForm.userEmail).then().catch();
    },

    //注册
    register() {
      registerUser(this.registerForm).then().catch();
    },

    //登陆
    login() {
      loginUser(this.LoginForm)
        .then((response) => {
          if (response.code === 200) {
            //设置token
            sessionStorage.setItem("token", response.data.token);

            //设置用户信息
            this.$store.commit("setUserdata", response.data);
            this.$store.commit("setUserImgUrl", response.data.userImgUrl);

            alert(response.data.token);
            //跳转页面
            this.$router.push({ path: "/" });
          }
        })
        .catch();
    },

    //跳转支付宝登陆
    alilogin() {
      alilogin().then((response) => {
        window.location.href = response;
      });
    },
  },

  created() {
    this.token = this.$route.query.token;

    if (this.token) {
      sessionStorage.setItem("token", this.token);
      getUserInfo().then((response) => {
        //设置用户信息
        this.$store.commit("setUserdata", response.data);
        this.$store.commit("setUserImgUrl", response.data.userImgUrl);
        //跳转页面
        this.$router
          .push({
            path: "/",
          })
          .catch();
      });
    }
  },
};
</script>

<style>
.box {
  height: 1200px;
  position: relative;
  background-image: url("../assets/loginbackground.jpg");
  background-size: cover;
  font-size: 18px;
  font-family: "microsoft yahe";
}

.registerform {
  text-align: center;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.loginregisterbox {
  background: white;
  text-align: center;
  width: 400px;
  height: 500px;
  margin: 0 auto;
  position: absolute;
  top: 200px;
  right: 300px;
}

/* 登陆注册切换样式 */
.tab {
  height: 50px;
  font-weight: 700;
  color: #e4393c;
  margin-bottom: 70px;
}

.logintab {
  width: 200px;
  text-align: center;
  line-height: 50px;
  float: left;
}

.registertab {
  width: 200px;
  text-align: center;
  line-height: 50px;
  float: right;
}

.loginform {
  width: 300px;
  margin: 0, auto;
}
</style>